import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import {RecoilRoot,atom,useRecoilState} from './recoil';
//定义原子状态
const todoListState = atom({
  key:'todoList',//全局唯一的
  default:[]//默认值是一个数组
});


function TodoApp(){
  let  [todoList,setTodoList] = useRecoilState(todoListState);
  const [text,setText]= useState('');
  return (
    <div>
      <input value={text} onChange={event=>setText(event.target.value)}/>
      <button onClick={()=>{
        setTodoList([...todoList,text]);
        setText('')
      }}>增加</button>
      <ul>
        {
          todoList.map(item=><li key={item}>{item}</li>)
        }
      </ul>
    </div>
  )
}

ReactDOM.render(
  <RecoilRoot>
    <TodoApp />
  </RecoilRoot>,
  document.getElementById('root')
);
